<template>
  <div 
    class="dialog-mask"
    v-show="isDialog"
    @click="handleClose"
  >
    <div class="dialog-wrapper" :style="{width, height}" @click.stop>
      <div class="dialog-wrapper--head">
        <slot name="header">
          <div>{{title}}</div>
        </slot>
        <div><i class="el-icon-close head-close" @click="handleClose" ></i></div>
      </div>
      <div class="dialog-wrapper--main">
        <slot name="main"></slot>
      </div>
      <div class="dialog-wrapper--footer" v-if="isFooter">
        <slot name="footer">
          <el-button type="primary" @click="handleConfirm">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XinzDialog',
  props: {
    isDialog: {
      type: Boolean,
      default: false
    },
    isFooter: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    },
    width: {
      type: String || Number,
      default: "30%"
    },
    height: {
      type: String || Number,
      default: "400px"
    }
  },
  methods: {
    handleClose() { // 关闭弹窗
      this.$emit("handleClose");
      this.$emit("update:isDialog", false);
    },
    handleConfirm() { // 确认
      this.$emit("handleConfirm");
    }
  }
};
</script>

<style scoped>
.dialog-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);

  position: fixed;
  left: 0;
  top: 0;
  
  display: flex;
  justify-content: center;
  /* align-items: center; */

  z-index: 999;
}

.dialog-wrapper {
  margin-top: 15vh;
  border-radius: 2px;
  background-color: #fff;
}

.dialog-wrapper .dialog-wrapper--head {
  width: 100%;
  height: 60px;
  padding: 20px;
  border-bottom: 1px solid #e9e9e9;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-wrapper .dialog-wrapper--main {
  width: 100%;
  height: calc(100% - 120px);
  padding: 20px;
  box-sizing: border-box;
}
.dialog-wrapper .dialog-wrapper--footer {
  width: 100%;
  height: 60px;
  padding: 0px 20px;
  box-sizing: border-box;
  border-top: 1px solid #e9e9e9;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>